<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :tree-node="company">
          <el-dropdown-item
            :disabled="!checkPermission('add-dept')"
            @click.native="addDept(company)"
            >添加子部门</el-dropdown-item
          >
        </tree-tools>

        <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
        <!-- departs中有多少子元素对象，就循环多少次el-tree，一个子元素对象对应一个el-tree -->
        <el-tree :data="departs" default-expand-all>
          <!-- 传入内容 插槽内容 会循环多次el-tree 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象 -->
          <!-- slot-scope="{ node, data }" node,data是el-tree组件内部传出来的值-->
          <tree-tools slot-scope="{ node: node1, data }" :tree-node="data">
            <!-- 下拉选项 -->
            <el-dropdown-item
              :disabled="!checkPermission('add-dept')"
              @click.native="addDept(node1, data)"
              >添加子部门</el-dropdown-item
            >
            <el-dropdown-item @click.native="editDept(data)"
              >编辑部门</el-dropdown-item
            >
            <el-dropdown-item @click.native="delDept(data.id)"
              >删除部门</el-dropdown-item
            >
          </tree-tools>
        </el-tree>
      </el-card>
      <!-- 新增/编辑部门弹层组件 -->
      <!-- 重置数据和校验方式2-v-if -->
      <AddDept
        v-if="showDialog"
        ref="addDeptRef"
        :show-dialog.sync="showDialog"
        :tree-node="node"
        @close="showDialog = false"
        @addDepts="getDepartments"
      ></AddDept>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { delDepartment, getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  props: {},
  data() {
    return {
      company: { name: '', manager: '负责人', id: '' }, // 就是头部的数据结构
      departs: [],
      /* [{label: '一级 1',
           children: [{label: '二级 1-1'}]},
           {label: '一级 2',
            children: [{label: '二级 2-1'}]},
           {}...] */
      showDialog: false, // 控制对话框显示
      node: {}, // 当前操作的部门
      defaultProps: {
        label: 'label', // 表示 从这个属性显示内容
        children: 'children' // 表示从这个属性中去找子节点
      }
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    /* // 按钮权限控制
    // key为权限标识的形参
    checkPermission(key) {
      try {
        return this.$store.state.user.userInfo.roles.points.includes(key)
      } catch (error) {
        // 捕获错误，防止退出登录的时候报错
        return false
      }
    }, */
    // 编辑部门
    async editDept(data) {
      this.node = data
      this.showDialog = true
      // 传参给弹层组件
      // const formData = await getDepartDetail(data.id)
      // // 不建议props父子传参（数据是异步传递了🆘🆘），推荐ref传参
      // this.$refs.addDeptRef.formData = formData
      this.$nextTick(() => {
        this.$refs.addDeptRef.getDepartDetail(data.id)
      })
    },
    // 删除部门
    async delDept(id) {
      // console.log(id)
      try {
        // 确认
        await this.$confirm('是否删除？')
        console.log('点击了是')
        // 发请求
        await delDepartment(id)
        // 提示成功
        this.$message.success('删除成功')
        // 刷新列表
        this.getDepartments()
      } catch (e) {
        console.log(e.response)
        if (!e.response) {
          console.log('点击了否')
        }
      }
    },
    // 添加子部门
    addDept(node, data) {
      console.log(node, data)
      this.showDialog = true
      this.node = data
    },

    // 获取部门组织架构
    async getDepartments() {
      const { companyName, depts } = await getDepartments()
      console.log(companyName, depts)
      this.company.name = companyName
      this.departs = tranListToTreeData(depts, '')
    }

  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
